<template>
  <div class="index-list" id="index-list">
    <tab custom-bar-width="0" class="index-tab">
      <tab-item
        @on-item-click="goLink(item)"
        :selected="link === item.link"
        class="tab-item"
        active-class="active-item"
        v-for="(item, index) in listPartOne" :key="index"
      >
        {{item.title}}
      </tab-item>
    </tab>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import {Tab, TabItem} from 'vux'

export default {
  name: "index",
  components: {Tab, TabItem},
  data() {
    return {
      listPartOne: [
        {
          // id: 10,
          title: '问题',
          link: '/question'
        },
        {
          // id: 20,
          title: '公告',
          link: '/notice'
        }
      ],
      link: '',
    }
  },
  watch: {},
  async mounted() {
    this.link = this.$route.path
  },
  methods: {
    goLink({link}) {
      this.$router.push({path: link})
    },
  },
}
</script>

<style lang="less">
.index-tab {
  .vux-tab {
    .tab-item {
      font-size: 18px;
      background-color: #37D9D1;
      color: #fff;
    }
  }

  .active-item {
    font-weight: bolder;
    color: #fff !important;
  }
}

.index-list {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>
